<template>
    <div class="channel">
        <van-tabs v-model="active" @click="changeFn">
            <van-tab :title="item.name" v-for="item in brotherCategory" :key="item.id">
                <!-- 标题 -->
                <h3>{{item.name}}</h3>
                <h4>{{item.front_desc}}</h4>
                <!-- 产品列表 -->
                <ul>
                    <li v-for="item1 in goodsList" :key="item1.id" @click="gotoDetail(item1)">
                        <img v-lazy="item1.list_pic_url" alt="">
                        <p>{{item1.name}}</p>
                        <span>{{item1.retail_price}}</span>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>  
    </div>
</template>

<script>
// 引入分类数据获取接口
import { getCateGoryData , searchGoods } from '@/utils/http'
export default {
    name: "Channel",
    props: [""],
    data() {
        return {
            active: 0, // 选中的类下标
            brotherCategory: [],  // 分类数组
            currentCategory:[],  // 分类对象
            goodsList: [],   //当前类别对应的商品列表
            page: 1,        // 当前页数
            size: 1000,   //每页显示条数
            id: "",    // 商品id
        };
    },
 
    components: {},

    computed: {},

    created() {
        // console.log(this.$route.query.id);
        getCateGoryData({id: this.$route.query.id}).then((res)=>{
            console.log(res);
            this.brotherCategory = res.data.data.brotherCategory;
            this.currentCategory = res.data.data.currentCategory;
            this.id = this.currentCategory.id;
            this.brotherCategory.forEach((item, index) => {
                // console.log(item,index);
                if (this.$route.query.id == item.id) {
                    this.active = index; //  当前选中的类下标
                }
            });
            // 修改完参数,重新获取数据
            this.getData(this.id)
        });
    },

    mounted() {},

    methods: {
        changeFn(title,name){
            // console.log(title, name);  // title:下标  name: 分类标题
            this.active = title;
            this.name = name;
            this.brotherCategory.forEach((item) => {
                // console.log(item);
                if (item.name == name) {
                    this.id = item.id;
                }
            });
            // 修改完参数,重新获取数据
            this.getData(this.id)
        },
        getData(id){
            searchGoods({
                page: this.page, // 默认页数
                size: this.size, // 每页数据的条数
                categoryId: id, // 商品类别id  全部 居家 服装  配件 ....
            }).then((res)=>{
                console.log(res);
                this.goodsList = res.data.data.goodsList;
            }).catch((e)=>{})
        },
        gotoDetail(item1){
            // console.log(item1);
            // 点击跳转到商品详情页
            this.$router.push({'path':'/productDetail',query:{id:item1.id}});
        }
    },
};
</script>
<style lang="less" scoped>
.channel{
    text-align: center;
    h3{
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        color: black;
    }
    h4{
        height: 30px;
        line-height: 30px;
        color: #666;
        font-size: 16px;
        margin-bottom: 50px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 50%;
            img{
                width: 100%;
                display: inline;
            }
            p{
                font-size: 16px;
                color: black
            }
            span{
                display: block;
                color: #8b0000;
                font-size: 17px;
                margin-top: 15px;
                margin-bottom:23px;
            }
        }
    }
}
</style>